<template>
  <span :class="tagClasses">{{ text }}
    <i v-if="checkable" class="el-tag__close el-icon-check" @click="onStudentCheck" />
  </span>
</template>

<script>
export default {
  name: 'StudentTag',
  // 父组件传过来的属性值 <student-tag type="danger" size="mini" text="lx">
  props: {
    type: { type: String, default: 'info' },

    size: { type: String, default: 'small' },

    text: { type: String, default: '' },

    checkable: { type: Boolean, default: false }
  },

  data() {
    return {
    }
  },

  computed: {
    tagClasses() {
      return [
        'el-tag',
        this.size ? 'el-tag--' + this.size : '',
        this.type ? 'el-tag--' + this.type : ''

      ]
    }

  },

  watch: {

  },

  created() {

  },
  mounted() {

  },

  methods: {
    onStudentCheck() {
      this.$emit('check', true, true)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
